<template>
<div class="main-contents-box">
  <div class="main-contents-main">
    <div class="safewarp">
      <ul class="Infra">
          <li v-for="items in infraredList" :style="{left:items.x+'px',top:items.y+'px'}">
            
            <infra :infra-items="items"></infra>
          </li>
      </ul>
     
      <door class="door" :door-items="items" v-for="items in doorList" :style="{left:items.x+'px',top:items.y+'px'}"></door>
      <div class="safewarp-btn">
        <el-button type='primary' @click="edit" size="small" >{{btnname}}</el-button>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import door from "./tem/door"
import infra from "./tem/infrared"
export default {
  components:{
    door,
    infra,
  },
  name: 'safe',
  data () {
    return {
      infraredList:[
        /*{
          isActive:true,
          name:'红外1',
          x:100,
          y:100,
          deviceid:1111,
          isnull:false
        },
        {
          isActive:false,
          name:'红外2',
          x:200,
          y:200,
          deviceid:2222,
          isnull:true
        }*/
      ],
      doorList:[
        /*{
          isActive:true,
          name:'门磁1',
          x:350,
          y:100,
          deviceid:3333,
          isnull:false
        },
        {
          isActive:false,
          name:'门磁2',
          x:530,
          y:200,
          deviceid:4444,
          isnull:true
        }*/
      ],
      btnname:"编辑",
      btnstate:false,
      infrared_arr:[],
      door_arr:[]
    }
  },
  methods:{
    get_pwd(){
        let  pwd; 
        $.ajax({
            url:'../cfg/password.json',
            type:'GET',
            cache:false,
            async: false,
            dataType:'text',
            success:function(result){
                let data = eval("("+result+")");
                pwd = data.password;
            },
            error:function(realdata){                           
            }
        })
        return pwd;
    },
    check_pwd(){
        let username = window.sessionStorage.getItem('username');
        let password = window.sessionStorage.getItem('password');
        let pwd = this.get_pwd();
        if(username == "admin"){
            if(password != pwd){
                this.$message({
                    message: '密码做了更改,请重新登录!',
                    type: 'info',
                    center:true,
                    showClose: true
                });
                this.loginout();
            }
        } 
    },
    loginout(){
        window.sessionStorage.removeItem("username");
        window.sessionStorage.removeItem("password");
       
        this.set_log("用户退出");
        this.$router.push("/login");
    },
    set_log(str){//用户操作日志
        let  msg= {"cmd":"CGI_LOG_SET_OPT","content":str};
        $.ajax({
            url:"cgi-bin/main.cgi",
            contentType: "application/json;charset=utf-8",
            type:"post",
            data:JSON.stringify(msg),
            success:function(msg){           
            }
        })
    },
    get_info(){
        let that = this;
        let get_env_msg = {"cmd":"CGI_MONITOR_GET_ENV","sensorlist":[3,7]};
        if(window.sessionStorage.getItem('username')=="zyl"){
              $.ajax({
                  url:"../static/get_env_safe.json",
                  contentType: "application/json;charset=utf-8",
                  type:"get",
                  dataType:'text',
                  cache:false,
                  async: false,
                  success:function(msg){ 
                  let res = eval("("+msg+")"); 
                  
                   //判断是否存在某类传感器，需要判断数据是不是存在
                    //判断红外是否存在
                    if(res["3"] == undefined){
                        that.$data.infraredList=[];
                    }else{
                        let infrared_arr = new Array();
                        //that.$data.waters = res["1"];
                        $.each(res['3'],function(n,value){
                             infrared_arr.push(value.deviceid); 
                        }) 
                        //将包含红外的deviceid数组赋值到什么infrared_arr中，以便实时显示数据使用
                        that.$data.infrared_arr = infrared_arr;
                        let real_msg ={"cmd":"CGI_MONITOR_GET_ENV_REALDATA","devicelist":infrared_arr};

                        $.ajax({
                              url:'../static/get_env_safedata.json',
                              type:'GET',
                              cache:false,
                              async: false,
                              dataType:'text',
                              success:function(result){
                                  let realdata = eval("("+result+")");

                                  
                                  $.each(res["3"],function (i,value) {
                                    if(JSON.stringify(realdata[value.deviceid]) == "{}"){
                                          value["isActive"] = false;
                                          value["isnull"] = true;
                                          //value["brief"] = "采集超时";   
                                      }else{
                                          if(realdata[value.deviceid]["196609"] == 1){//告警
                                              value["isActive"] = true;
                                              //console.log("OK");
                                          }else{//不告警
                                              value["isActive"] = false;
                                              //console.log("ERROR");
                                          }
                                          value["isnull"] = false;
                                          //value["brief"] = "";
                                      }
                                      res["3"][i] = value; 
                                  })
                                  that.$data.infraredList = res["3"];
                              },
                              error:function(realdata){
                              }
                          })
                    }


                    if(res["7"] == undefined){
                        that.$data.doorList=[];
                    }else{
                        let door_arr = new Array();
                        //that.$data.waters = res["1"];
                        $.each(res['7'],function(n,value){
                             door_arr.push(value.deviceid); 
                        }) 
                        //将包含红外的deviceid数组赋值到什么infrared_arr中，以便实时显示数据使用
                        that.$data.door_arr = door_arr;
                        let real_msg ={"cmd":"CGI_MONITOR_GET_ENV_REALDATA","devicelist":door_arr};

                        $.ajax({
                              url:'../static/get_env_safedata.json',
                              type:'GET',
                              cache:false,
                              async: false,
                              dataType:'text',
                              success:function(result){
                                  let realdata = eval("("+result+")");
                                  $.each(res["7"],function (i,value) {
                                    if(JSON.stringify(realdata[value.deviceid]) == "{}"){
                                          value["isActive"] = false;
                                          value["isnull"] = true;
                                          //value["brief"] = "采集超时";   
                                      }else{
                                          if(realdata[value.deviceid]["458753"] == 1){//告警
                                              value["isActive"] = true;
                                              //console.log("OK");
                                          }else{//不告警
                                              value["isActive"] = false;
                                              //console.log("ERROR");
                                          }
                                          value["isnull"] = false;
                                          //value["brief"] = "";
                                      }
                                      res["7"][i] = value; 
                                  })
                                  that.$data.doorList = res["7"];
                              },
                              error:function(realdata){
                              }
                          })
                    }
                  },
                  error:function(XMLHttpRequest,textStatus,errorThrown){
                  }
              });
              
        }else{
            $.ajax({
                  url:"cgi-bin/main.cgi",
                  contentType: "application/json;charset=utf-8",
                  type:"post",
                  cache:false,
                  async: false,
                  data:JSON.stringify(get_env_msg),
                  success:function(msg){ 
                  let res = eval("("+msg+")"); 
                   //判断是否存在某类传感器，需要判断数据是不是存在

                    //红外解析
                    //判断红外是否存在
                    if(res["3"] == undefined){
                        that.$data.infraredList=[];
                    }else{
                        let infrared_arr = new Array();
                        $.each(res['3'],function(n,value){
                             infrared_arr.push(value.deviceid); 
                        }) 
                        //将包含红外的deviceid数组赋值到什么infrared_arr中，以便实时显示数据使用
                        that.$data.infrared_arr = infrared_arr;
                        let real_msg ={"devicelist":infrared_arr};
                        $.ajax({
                              url:'cgi-bin/JHMonitoring.cgi',
                              type:'post',
                              cache:false,
                              async: false,
                              data:JSON.stringify(real_msg),
                              success:function(result){
                                  let realdata = eval("("+result+")");
                                  $.each(res["3"],function (i,value) {
                                    if(JSON.stringify(realdata[value.deviceid]) == "{}"){
                                          value["isActive"] = false;
                                          value["isnull"] = true;
                                          //value["brief"] = "采集超时";   
                                      }else{
                                          if(realdata[value.deviceid]["196609"] == 1){//告警
                                              value["isActive"] = true;
                                              //console.log("OK");
                                          }else{//不告警
                                              value["isActive"] = false;
                                              //console.log("ERROR");
                                          }
                                          value["isnull"] = false;
                                          //value["brief"] = "";
                                      }
                                      res["3"][i] = value; 
                                  })
                                  that.$data.infraredList = res["3"];
                              },
                              error:function(realdata){
                              }
                          })
                    }

                    //门磁解析
                    if(res["7"] == undefined){//判断门磁是否存在
                        that.$data.doorList=[];
                    }else{
                        let door_arr = new Array();
                        //that.$data.waters = res["1"];
                        $.each(res['7'],function(n,value){
                             door_arr.push(value.deviceid); 
                        }) 
                        //将包含红外的deviceid数组赋值到什么infrared_arr中，以便实时显示数据使用
                        that.$data.door_arr = door_arr;
                        let real_msg ={"devicelist":door_arr};

                        $.ajax({
                              url:'cgi-bin/JHMonitoring.cgi',
                              type:'post',
                              cache:false,
                              async: false,
                              data:JSON.stringify(real_msg),
                              success:function(result){
                                  let realdata = eval("("+result+")");
                                  $.each(res["7"],function (i,value) {
                                    if(JSON.stringify(realdata[value.deviceid]) == "{}"){
                                          value["isActive"] = false;
                                          value["isnull"] = true;
                                          //value["brief"] = "采集超时";   
                                      }else{
                                          if(realdata[value.deviceid]["458753"] == 1){//告警
                                              value["isActive"] = true;
                                              //console.log("OK");
                                          }else{//不告警
                                              value["isActive"] = false;
                                              //console.log("ERROR");
                                          }
                                          value["isnull"] = false;
                                          //value["brief"] = "";
                                      }
                                      res["7"][i] = value; 
                                  })
                                  that.$data.doorList = res["7"];
                              },
                              error:function(realdata){
                              }
                          })
                    }
                  },
                  error:function(XMLHttpRequest,textStatus,errorThrown){
                  }
              });
        }
    },
    get_door_info(){
        let that = this;
        let ii = 0 ;//用于门磁传感器的计数赋值
        let real_msg ={"devicelist":this.$data.door_arr};
        if(window.sessionStorage.getItem('username')=="zyl"){
            $.ajax({
                url:'../static/get_env_real_doordata.json',
                type:'GET',
                cache:false,
                async: false,
                dataType:'text',
                success:function(realdata){
                    let data = eval("("+realdata+")");
                    $.each(data,function (i,value) {
                        if(JSON.stringify(data[i]["458753"]) == undefined){
                            that.$data.doorList[ii]["isActive"] = false;
                            that.$data.doorList[ii]["isnull"] = true;
                            //that.$data.doorList[ii]["brief"] = "采集超时";
                            ii++;
                        }else{
                            if(data[i]["458753"] == 1){//告警
                                that.$data.doorList[ii]["isActive"] = true;
                            }else{//不告警
                                that.$data.doorList[ii]["isActive"] = false;
                            }
                            that.$data.doorList[ii]["isnull"] = false;
                            //that.$data.doorList[ii]["brief"] = "";  
                            ii++;
                        }
                    })  
                },
                error:function(realdata){                           
                }
            })
        }else{
            $.ajax({
                url:'cgi-bin/JHMonitoring.cgi',
                type:'post',
                cache:false,
                async: false,
                data:JSON.stringify(real_msg),
                success:function(realdata){
                    let data = eval("("+realdata+")");
                    $.each(data,function (i,value) {
                        if(JSON.stringify(data[i]["458753"]) == undefined){
                            that.$data.doorList[ii]["isActive"] = false;
                            that.$data.doorList[ii]["isnull"] = true;
                            //that.$data.doorList[ii]["brief"] = "采集超时";
                            ii++;
                        }else{
                            if(data[i]["458753"] == 1){//告警
                                that.$data.doorList[ii]["isActive"] = true;
                            }else{//不告警
                                that.$data.doorList[ii]["isActive"] = false;
                            }
                            that.$data.doorList[ii]["isnull"] = false;
                            //that.$data.doorList[ii]["brief"] = "";  
                            ii++;
                        }
                    })  
                },
                error:function(realdata){                           
                }
            })
        }
    },
    get_infrared_info(){
        let that = this;
        let ii = 0 ;//用于红外传感器的计数赋值
        let real_msg ={"devicelist":this.$data.infrared_arr};
        if(window.sessionStorage.getItem('username')=="zyl"){
            $.ajax({
                url:'../static/get_env_real_infrareddata.json',
                type:'GET',
                cache:false,
                async: false,
                dataType:'text',
                success:function(realdata){
                    let data = eval("("+realdata+")");
                    $.each(data,function (i,value) {
                        if(JSON.stringify(data[i]["196609"]) == undefined){
                            that.$data.infraredList[ii]["isActive"] = false;
                            that.$data.infraredList[ii]["isnull"] = true;
                            //that.$data.infraredList[ii]["brief"] = "采集超时";
                            ii++;
                        }else{
                            if(data[i]["196609"] == 1){//告警
                                that.$data.infraredList[ii]["isActive"] = true;
                            }else{//不告警
                                that.$data.infraredList[ii]["isActive"] = false;
                            }
                            that.$data.infraredList[ii]["isnull"] = false;
                            //that.$data.infraredList[ii]["brief"] = "";  
                            ii++;
                        }
                    })  
                },
                error:function(realdata){                           
                }
            })
        }else{
            $.ajax({
                url:'cgi-bin/JHMonitoring.cgi',
                type:'post',
                cache:false,
                async: false,
                 data:JSON.stringify(real_msg),
                success:function(realdata){
                    let data = eval("("+realdata+")");
                    $.each(data,function (i,value) {
                        if(JSON.stringify(data[i]["196609"]) == undefined){
                            that.$data.infraredList[ii]["isActive"] = false;
                            that.$data.infraredList[ii]["isnull"] = true;
                            //that.$data.infraredList[ii]["brief"] = "采集超时";
                            ii++;
                        }else{
                            if(data[i]["196609"] == 1){//告警
                                that.$data.infraredList[ii]["isActive"] = true;
                            }else{//不告警
                                that.$data.infraredList[ii]["isActive"] = false;
                            }
                            that.$data.infraredList[ii]["isnull"] = false;
                            //that.$data.infraredList[ii]["brief"] = "";  
                            ii++;
                        }
                    })  
                },
                error:function(realdata){                           
                }
            })
        }
    },
    move(){
      let that=this;
      $(".safewarp ul li").draggable({//红外拖动
        containment: "parent",
        stop: function () {
            let lefts,tops,infraredid;
            lefts=parseInt($(this).css("left"));
            tops=parseInt($(this).css("top"));
            infraredid=$(this).find(".infraredid").text();
            $.each(that.$data.infraredList,function(i,value){
              if(value.deviceid==infraredid){
                 value.x=lefts;
                 value.y=tops;
              }
            })
        }
      })
      $(".safewarp .door").draggable({//门磁拖动
        containment: "parent",
        stop: function () {
            let lefts,tops,doorid;
            lefts=parseInt($(this).css("left"));
            tops=parseInt($(this).css("top"));
            doorid=$(this).find(".doorid").text();

            $.each(that.$data.doorList,function(i,value){
              if(value.deviceid==doorid){
                 value.x=lefts;
                 value.y=tops;
              }
            })
        }
      })
       $(".safewarp ul li").draggable("disable");
       $(".safewarp .door").draggable("disable");
    },
    edit(){
        let that=this;
        this.$data.btnstate=!this.$data.btnstate;
        if(this.$data.btnstate==true){
            this.$data.btnname="保存";
            $(".safewarp ul li").draggable("enable");
            $(".safewarp .door").draggable("enable");
        }else{
            $(".safewarp ul li").draggable("disable");
            $(".safewarp .door").draggable("disable");
            that.$data.btnname="编辑";
            
            //整合拖动后的位置信息下发
            let position_arr = new Array();
            $.each(that.$data.infraredList,function (i,value) {//红外位置
                let str = {"deviceid":value.deviceid,"x":value.x,"y":value.y};
                position_arr.push(str);
            })

            $.each(that.$data.doorList,function (i,value) {//门磁位置
                let str = {"deviceid":value.deviceid,"x":value.x,"y":value.y};
                position_arr.push(str);
            })

            let msg = {"cmd":"CGI_MONITOR_SET_POS","device":position_arr};
            $.ajax({
                url:"cgi-bin/main.cgi",
                contentType: "application/json;charset=utf-8",
                type:"post",
                data:JSON.stringify(msg),
                success:function(msg){
                    let data =eval( "("+msg+")" );
                    if(data.response == true){
                        that.$message({
                          message: '传感器位置设置成功!',
                          type: 'success',
                          center:true,
                          showClose: true
                        });
                    }else{
                      that.$message({
                          message: data.errlog,
                          type: 'error',
                          center:true,
                          showClose: true
                        });
                    } 
                }
            })
        }
    }
  },
  mounted(){
      this.check_pwd(); 
      this.get_info();
      setTimeout(this.move,500)
  },
  beforeCreate(){//用于设置下行设备时清除定时器   
      window.door_interval = "";
      window.infrared_interval = "";
  },
  created(){
      
  },
  watch:{
      door_arr:function(){
          if(this.$data.door_arr.length !=0){
              door_interval = setInterval(this.get_door_info,2000);
              setTimeout(door_interval,2000);
          }
      },
      infrared_arr:function(){
          if(this.$data.infrared_arr.length != 0){
              infrared_interval = setInterval(this.get_infrared_info,2000);
              setTimeout(infrared_interval,2000);
          }
      }
  },
  beforeDestroy(){//页面关闭前清掉计时器
      clearInterval(door_interval);
      clearInterval(infrared_interval);
  }
}
</script>
<style>
  .nav{
    height: 700px;
  }
  .box{
    width: 48px;
    height:48px;
    background: url("../../assets/hongwai.png") center no-repeat;
    border:5px solid transparent;
    border-radius: 50%;
    margin-top: 10px;
    margin-left: 5px;
  }
  .box_active{
    box-shadow: 0px 0px 30px red;
    border-color:red;
    background: url("../../assets/hongwai1.png") center no-repeat;
  }
  .box-name{
    width:70px;
    text-align: center;
    height:25px;
    line-height: 25px;
    background: #0080C0;
    font-size: 14px;
    color: #fff;
    border-radius: 3px;
    overflow: hidden;/*内容超出后隐藏*/
    text-overflow: ellipsis;/* 超出内容显示为省略号*/
    white-space: nowrap;/*文本不进行换行*/
  }
  .safewarp{
    width:800px;
    height: 500px;
    margin: auto;
    margin-top: 5%;
    background: url(../../assets/hw2.png) center no-repeat;
    position: relative;
    min-width: 800px;
  }
  .box-content{
    width:100%;
    background:#fff;
    text-align: center;
    height:50px;
    line-height: 40px;
    padding:0px;
  }
  .safewarp ul{
    width: 100%;
    height: 100%;
  }
  .safewarp ul li{
    position: absolute;
    left: 0px;
    top: 0px;
    cursor: move;
  }
  .door{
    position: absolute;
    left: 0px;
    top: 0px;
    cursor: move;
  }
  .safewarp-btn{
    width: 100px;
    height: 40px;
    position: fixed;
    right: 50px;
    top:100px;
    text-align: center;
    line-height: 40px;
  }
  .safewarp-btn .el-button{
    width: 80px;
    font-size: 15px;
    letter-spacing: 2px;
    height: 30px;
    line-height: 30px;
    padding:0px;
  }
  .door-box{
    width:31px;
    height:40px;
    margin: auto;
    position: relative;
    top: 5px;
    background: url("../../assets/colse.png") no-repeat;
  }
  .door_open{
    background: url("../../assets/open.png") no-repeat;
  }
  .el-badge{
    position: absolute;
    right:-60px;
    top: 30px;
  }
</style>
